<template>
  <h1 if.bind="error" click.delegate="bind()" class="card-panel red lighten-1">Couldn't retrieve data. Wanna try
    again?</h1>
  <table class="responsive-table" if.bind="data && data.length > 0">
    <tr>
      <th>blockHeight</th>
      <th>status</th>
      <th>confirmationProgress</th>
      <th>transactionConfirmationData</th>
      <th>reward</th>
      <th>created</th>
    </tr>
    <tr repeat.for="block of data">
      <td>${block.blockHeight}</td>
      <td>${block.status}</td>
      <td>${block.confirmationProgress * 100}%</td>
      <td><a href.bind="block.infoLink" target="_blank" class="truncate" style="max-width: 200px;">
        ${block.transactionConfirmationData}</a></td>
      <td>${block.reward}</td>
      <td>${moment(block.created).format("lll")}</td>
    </tr>
  </table>

  <template if.bind="!data || (data.length === 0 && currentPageNumber === 0) ">
    No blocks found yet.
  </template>
  <button if.bind="allowNext " md-button md-waves click.delegate="nextPage()">Load
    more
  </button>
  <button md-button md-waves click.delegate="refresh()">Refresh
  </button>
</template>
